<!DOCTYPE html>
<html class="h-100">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="bootstrap4/bootstrap4/css/bootstrap.min.css" />
		<script src="js/jquery-3.31.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap4/bootstrap4/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
		<script type="text/javascript" src="./tinymce/js/tinymce/tinymce.min.js">
		</script>
		<style>
			.bg-top {
				background: #17a2b8;
				color: #FFFFFF;
			}
			
			.bg-left {
				background: #222d31;
				color: #FFFFFF
			}
			
			.bg-foot {
				background: #17a2b8;
				color: #FFFFFF;
			}
			
			.card-header {
				padding: 0px;
				padding-left: 10px;
				background: #06394b;
			}
			
			.mylink {
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.mylink:hover {
				color: #FF0000;
				font-weight: bold;
			}
			
			.file {
				position: relative;
				display: inline-block;
				background: #D0EEFF;
				border: 1px solid #99D3F5;
				border-radius: 4px;
				padding: 4px 12px;
				overflow: hidden;
				color: #1E88C7;
				text-decoration: none;
				text-indent: 0;
				line-height: 20px;
			}
			
			.file input {
				position: absolute;
				font-size: 100px;
				right: 0;
				top: 0;
				opacity: 0;
			}
			
			.file:hover {
				background: #AADFFD;
				border-color: #78C3F3;
				color: #004974;
				text-decoration: none;
			}
		</style>
	</head>

	<body class="h-100">
		<div class="container-fluid p-0 h-100 d-flex flex-column">
			<div class="py-3 bg-top">
				<h4>深圳美图视后台管理系统</h4>
			</div>
			
			<div class="row h-100 p-0 m-0">
				
				<div class="col-lg-2 bg-left p-0 left_area">
					<div class="accordion" id="accordionExample">
						<div class="card border-0">
							<div class="card-header" id="headingOne">
								<h2 class="mb-0">
        <button class="btn mylink" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          基础信息
        </button>
        
        <i class="fa fa-arrow-circle-left pull-right pt-3 pr-2 btn_hide"
        	style="color: #FFFFFF;font-size: 20px;"></i>
      </h2>
							</div>

							<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
								<div class="card-body" style="background: #394750;">
									<ul class="list-unstyled">
										<li class="pl-3">
											<a href="ProductManagement.html" class="text-white">
												<i class="fa fa-life-buoy"></i>栏目管理</a>
										</li>
										<li class="pl-3">
											<a href="ArticleRelease
.html" class="text-white">
												<i class="fa fa-life-buoy"></i>产品添加</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="card border-0">
							<div class="card-header" id="headingTwo">
								<h2 class="mb-0">
        <button class="btn mylink collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          业务处理
        </button>
      </h2>
							</div>
							<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
								<div class="card-body" style="background: #394750;">
									子菜单
								</div>
							</div>
						</div>
						<div class="card border-0">
							<div class="card-header" id="headingThree">
								<h2 class="mb-0">
        <button class="btn mylink collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          系统设置
        </button>
      </h2>
							</div>
							<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
								<div class="card-body" style="background: #394750;">
									子菜单
								</div>
							</div>
						</div>
					</div>
				</div>
				
				
				<div class="col-lg-10 bg-white p-0 right_area">
					<nav aria-label="breadcrumb">
						<ul class="breadcrumb">
							<li class="breadcrumb-item">
								<a href="#">
									<i class="fa fa-home btn_show"> 首页</i>
								</a>
							</li>
							<li class="breadcrumb-item">
								<a href="#">业务处理</a>
							</li>
							<li class="breadcrumb-item active" aria-current="page">添加产品</li>
						</ul>
					</nav>
					<center>
						<h4>添加产品</h4>
						<hr class="w-50" />
					</center>
					<div class="container">
						<div class="row">
							<div class="col">
								<form>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-2 col-form-label">产品名称</label>
										<div class="col-sm-10">
											<input type="email" class="form-control" id="inputEmail3" placeholder="请输入产品名称">
										</div>
									</div>
									<div class="form-group row">
										<label for="inputPassword3" class="col-sm-2 col-form-label">产品分类</label>
										<div class="col-sm-10">
											<select>
												<option value="">产品中心</option>
												<option value="">成功案例</option>
											</select>
										</div>
									</div>
									<div class="form-group row">
										<label for="inputPassword3" class="col-sm-2 col-form-label">产品图片</label>
										<div class="col-sm-10">
											<div>
												<a href="javascript:;" class="file">选择文件
													<input type="file" name="myfile" id="myfile" accept="image/*" onchange="showImg(this)">
												</a>
											</div>
											<div>
												<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5dad8888d06bb5358009c6072182ec7113ca12c0186b-vFfJHA_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641025155&t=6111224777e5662b209810d5827c5724" style="width: 150px;height: 100px;" id="previmg" />
											</div>
										</div>
									</div>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-2 col-form-label">产品内容</label>
										<div class="col-sm-10">
											<textarea id="mytextarea"></textarea>
											<script>
												tinymce.init({
													selector: '#mytextarea'
												});
											</script>
										</div>
									</div>
									<hr />
									<center><button class="btn btn-primary">马上保存</button></center>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="bg-foot py-2 text-white">
				<center>
					<h6>版权所有，欢迎盗版</h6></center>
			</div>
		</div>

		<script>
			$(".btn_hide").on("click", function() {
				$(".left_area").hide();
				$(".right_area").removeClass("col-lg-10");
				$(".right_area").addClass("col-lg-12");
			});
			$(".btn_show").on("click", function() {
				$(".left_area").show();
				$(".right_area").removeClass("col-lg-12");
				$(".right_area").addClass("col-lg-10");
			});

			function showImg(obj) {
				var file = $(obj)[0].files[0];
				var imgdata = '';
				if(file) {
					var reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onload = function(evt) {
						$("#previmg").attr('src', evt.target.result)
					};
				} else {
					alert("上传失败");
				}
			}
		</script>
	</body>

</html>